<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情页</title>
    <!--标题栏图标-->
    <link rel="icon" href="../static/images/Common/favicon.ico" th:href="@{/images/Common/favicon.ico}"
          type="images/x-ico"/>
    <link rel="stylesheet" href="../static/lib/semantic/semantic.min.css" th:href="@{/lib/semantic/semantic.min.css}">
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../static/css/cover-editormd.css" th:href="@{/css/cover-editormd.css}">
    <link rel="stylesheet" href="../static/css/me-common.css" th:href="@{/css/me-common.css}">
    <link rel="stylesheet" href="../static/css/me-special.css" th:href="@{/css/me-special.css}">
    <link rel="stylesheet" href="../static/css/me-media.css" th:href="@{/css/me-media.css}">
    <link rel="stylesheet" href="../static/css/cover-semantic.css" th:href="@{/css/cover-semantic.css}">
</head>

<body>

<!------导航------>
<!--inverted:颜色反转；attached消除圆角-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <img src="../../static/images/Common/logo_row_simple.png" th:src="@{/images/Common/logo_row_simple.png}"
                 class="left float image m-margin-right-middle" height="50px" alt="">
            <a href="../index.html" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide"
               th:classappend="${n==1} ? 'active'"><i class="home icon m-margin-right-no"></i>&nbsp;博客管理</a>
            <a href="../categories.html" th:href="@{/admin/categories}" class="m-item item m-mobile-hide"
               th:classappend="${n==2} ? 'active'"><i
                    class="folder open icon m-margin-right-no"></i>&nbsp;分类管理</a>
            <a href="../tags.html" th:href="@{/admin/tags}" class="m-item item m-mobile-hide"
               th:classappend="${n==3} ? 'active'"><i class="tags icon m-margin-right-no"></i>&nbsp;标签管理</a>
            <a href="../links.html" th:href="@{/admin/links}" class="m-item item m-mobile-hide"
               th:classappend="${n==4} ? 'active'"><i
                    class="linkify icon m-margin-right-no"></i>&nbsp;外链管理</a>
            <a href="../links.html" th:href="@{/admin/linkCategories}" class="m-item item m-mobile-hide"
               th:classappend="${n==5} ? 'active'"><i
                    class="sitemap icon m-margin-right-no"></i>&nbsp;分类管理</a>
            <a href="../logs.html" th:href="@{/admin/logs}" class="m-item item m-mobile-hide"
               th:classappend="${n==6} ? 'active'"><i class="pencil alternate icon m-margin-right-no"></i>&nbsp;日志管理</a>
            <!--            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="heartbeat icon m-margin-right-no"></i>娱乐<i-->
            <!--                    class="angle down icon m-margin-right-no "></i></a>-->
            <!--            <a href="../about.html" class="m-item item m-mobile-hide"><i class="user icon m-margin-right-no" th:classappend="${n==7} ? 'active'"></i>关于我</a>-->
            <div class="right m-item m-mobile-hide menu">

                <div class="ui dropdown item">
                    <img src="../../static/images/Common/avatar.png" th:src="@{/images/Common/avatar.png}"
                         alt="" class="ui avatar image">
                    <span th:text="${session.user.username}">Phoenix</span>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a th:href="@{/admin/user/userInfo}"  class="item">个人信息</a>
                        <a th:href="@{/admin/user/changePassword}" class="item" >修改密码</a>
                        <a href="#" th:onclick="logout()" class="item">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

    <div class="ui mini logout modal">
        <div class="header">退出登录</div>
        <div class="content">
            <p>你确定要退出登录吗</p>
        </div>
        <div class="actions">
            <div class="ui negative button">取消</div>
            <div class="ui positive right labeled icon button"><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">退出</font></font><i class="checkmark icon"></i></div>
        </div>
    </div>

</nav>


<!------底部footer------>
<footer th:fragment="footer">
    <!--底部teal颜色的条-->
    <div class="ui segment vertical teal inverted m-padded-tb-mini "></div>
    <!--底部footer正文-->
    <div class="ui inverted vertical segment m-padded-tb-big">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--QQ微信支付宝打赏二维码占六个栅栏-->
                <div class="five wide center aligned column m-children-center">
                    <!--QQ打赏二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../static/images/Common/QQ.png" th:src="@{/images/Common/QQ.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">QQ打赏</span>
                    </div>
                    <!--微信打赏二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../static/images/Common/WeChat.png" th:src="@{/images/Common/WeChat.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">微信打赏</span>
                    </div>
                    <!--支付宝打赏二维码-->
                    <div class="m-inline-block">
                        <img src="../static/images/Common/Pay.png" th:src="@{/images/Common/Pay.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">支付宝打赏</span>
                    </div>
                </div>
                <!--站点声明文字表述战11个栅栏-->
                <div class="eleven wide left aligned column ">
                    <h4 class="ui teal header">站点声明：</h4>
                    <p class="m-opacity-mini">1.文中的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。交流时请遵守理性，宽容的原则。</p>
                    <p class="m-opacity-mini">2.所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<span
                            th:text="#{author.email}"></span></p>
                    <p class="m-opacity-mini">Copyright © 2020 xinglongfei.cn. Designed by Phoenix.
                        <a href="https://beian.miit.gov.cn/" style="color: #ffffff;">备案号：赣ICP备2020013364号</a></p>
                </div>
            </div>
        </div>
    </div>
</footer>


<th:block th:fragment="deleteDialog(s)">
    <div class="ui mini delete modal">
        <div class="header">删除<span th:text="${s}"></span></div>
        <div class="content">
            <p>你确定删除<span th:text="${s}"></span>“<span id="delete-name" style="font-weight: bold;color: red"></span>”吗，删除后无法恢复！
            </p>
        </div>
        <div class="actions">
            <div class="ui negative button">取消</div>
            <div class="ui positive right labeled icon button"><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">确认</font></font><i class="checkmark icon"></i></div>
        </div>
    </div>
</th:block>

<th:block th:fragment="userCenter(n)">
    <div class="ui teal secondary vertical pointing menu" style="text-align: right">
        <a class="item" th:href="@{/admin/user/userInfo}" th:classappend="${n==1} ? 'active'">个人信息</a>
        <a class="item" th:href="@{/admin/user/changePassword}" th:classappend="${n==2} ? 'active'">修改密码</a>
    </div>
</th:block>


<th:block th:fragment="cancelDialog">
    <div class="ui mini cancel modal">
        <div class="header">返回页面</div>
        <div class="content">
            <p>确定返回吗？点击确定后，您的修改将会丢失！</p>
        </div>
        <div class="actions">
            <div class="ui negative button">取消</div>
            <div class="ui positive right labeled icon button"><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">确认</font></font><i class="checkmark icon"></i></div>
        </div>
    </div>
</th:block>


<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="../static/lib/semantic/semantic.min.js" th:src="@{/lib/semantic/semantic.min.js}"></script>
    <!--引入editormd-->
    <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>

    <script>
        function logout() {
            $('.ui.mini.logout.modal')
                .modal('setting', 'closable', false)
                .modal({ //各种回调方法
                    onApprove: function () {  //单击确认按钮
                        window.location = "/admin/logout";
                    },
                })
                .modal('show')
            ;
        }
    </script>

</th:block>


</body>
</html>